@import url(common.css);

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
general html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
body, table, textarea {margin:0px;font-family:Tahoma;font-size:13px;}
body {background-color:#333333;color:white}
a {color:white;}
a:hover {color:#ff7d00;text-decoration:none}
 
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
forms / controls
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
input[type=checkbox] {cursor:pointer}
 select {  border:2px solid #eeeeee;} 
 button {padding:5px;cursor:pointer}
.textfield, textarea, .textarea {border:1px solid #222222;background-color:#444444;color:white;padding:2px;}
.textfield:hover, textarea:hover { background-color:#666666;color:white }
.textfield:focus, textarea:focus {  color:black;background-color:white; }
hr {border:none;border-bottom:1px solid #666666}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
helpers
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
.firstChild {margin-top:0}
.lfloat {float:left}
.rfloat {float:right}
.clear {clear:both}
.tiny {font-size:9px}
table.clean {border-spacing:0px;border-collapse:collapse;margin:0;padding:0}
table.clean tbody td, 
.datatable tbody tr.action-row table.clean td {margin:0;padding:0px;border:none;}
 
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
everything is wraooed inside a table called #page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
#page {width:100%;max-width:1024px;height:100%;border-spacing:0px;border:none;border-right:5px solid #191919;background-color:#222222;}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
the left part of #page is #navi
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/

#navi{width:200px;height:100%;background-color:rgb(56,56,56);padding:0px 10px 0 0;vertical-align:top;border-right:5px solid #191919;}
#navi hr {border:none;border-bottom:1px solid #444444;}
#navi h3 {text-align:center;color:white;cursor:default;padding:0px;margin:5px 0 5px 0;}
#navi a {padding:2px 0 2px 5px;color:white;text-decoration:none; display:block; outline:none; }
#navi a:hover{background-color:#666666;border-right:5px solid #ffffff;}
#navi a.pressed{background-color:#222222;border-right:5px solid  #ff7700;}
#navi a:before {content:"» ";color:rgb(56,56,56);}
#navi a.pressed:before {color:white;}
#header {padding:10px;overflow:hidden}
#header span {position: relative;top:-3px; left:2px; font-weight:bold; cursor: default}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
the right part of #page is #content
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
#content {padding:20px;color:white;overflow:hidden;height:100%;}



/* 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
datatable
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
.datatable {width:100%; border:1px solid #121212; border-collapse:collapse;border-spacing:0px;table-layout:fixed;background-color:#333333;color:white; cursor:default}

.datatable caption { border:1px solid #121212;border-bottom:none;padding:5px;text-align:left;background-color:#333333;color:white}
.datatable caption hr {border-color:#444444}
.datatable caption h1, .datatable caption h2, .datatable caption h3 {font-weight:normal;margin:0px;color:#ff7700;padding:3px;}

.datatable thead th {font-weight:normal;font-size:12px;cursor:default;padding-left:4px;text-align:left;height:21px;background-image:url(../img/ae-table.png);background-repeat:no-repeat;background-position:top right;} 
.datatable thead th a {text-decoration:none;cursor:default;text-align:left;outline:none}
.datatable thead th a:hover {color:white}
/*.datatable thead th.hover:hover {background-position:left -21px;}*/
.datatable thead th.forwardSort  {background-position:right -21px;padding-right:20px;}
.datatable thead th.reverseSort  {background-position:right -42px;padding-right:20px;}

.datatable tbody tr.datarow {color:white;background-color:#515151}
.datatable tbody tr.datarow:hover {background-color:#3c3c3c;}
.datatable tbody tr.datarow.marked  { background-color:#660000;}
.datatable tbody tr.datarow.marked:hover  { background-color:#990000;} 
.datatable tbody tr.action-row td {padding:5px;  background-color:#333333;border-color:#444444;}
.datatable tbody td {padding:2px;font-size:12px;text-align:left;border-bottom:1px solid #848484}
.datatable tbody td.last-col {border:none;background-color:#333333;border-left:1px solid #666666}
.datatable tfoot {background-color:#222222;  color:white;   }
.datatable tfoot td {padding:10px}
.datatable tfoot .pagination {color:white;}
.datatable tfoot .pagination td {border-bottom:none;text-align:center}
.datatable tfoot .pagination table.buttons {border-spacing:0px;border-collapse:collapse;}
.datatable tfoot .pagination table.buttons td {padding:1px;text-align:center;}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
simple two column form: labels and textinputs float, manual clear with <br> 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
.twoColForm {}
.twoColForm label {display:block;float:left;margin-bottom:5px;text-align:left;}
.twoColForm .textfield {display:block;float:left;margin-bottom:5px; }
.twoColForm.song select {display:block;float:left;height:100px;margin-bottom:5px;border:1px solid #969696}
.twoColForm textarea {display:block;float:left;height:100px;margin-bottom:5px;}
.twoColForm br {clear:both;}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
checklist: checkbox replacement for multiple-select box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
.checklist {border: 1px solid #ccc;list-style: none;height: 100px;overflow: auto;width: 255px;}
.checklist, .checklist li { margin: 0; padding: 0; }
.checklist label {display: block;width:auto;float:none;cursor:pointer;margin:0;padding:2px;background-color: #dfdfdf; border-bottom:1px solid #aaaaaa;}
.checklist label:hover { background: #FFFFAA;  }
.checklist label.checked { background-color: #ff7700}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
After Effects styled link checkboxes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
.checkboxes {overflow:hidden;width:100%}
.checkboxes .checkbox {padding:4px;display:block;float:left;cursor:pointer;width:auto;height:12px;}
.checkboxes .checkbox .check {background-image:url(../img/custom-checkbox-grey.png);background-repeat:no-repeat;width:12px;height:12px;float:left;}
.checkboxes .checkbox.hover .check {background-position:-12px 0px;}
.checkboxes .checkbox.pressed .check {background-position:-24px 0px;}
.checkboxes .checkbox.checked .check {background-position:-36px 0px;}
.checkboxes .checkbox.checked.hover .check {background-position:-48px 0px;}
.checkboxes .checkbox.checked.pressed.over .check {background-position:-60px 0px;}
.checkboxes .checkbox .label {padding-left:4px;float:left;position:relative;top:-2px;}
.checkboxes br {clear:both;}

.scrollchecklist {}
.scrollable.checkboxes .checkbox {width:auto;background-color:#2c2c2c;border-bottom:1px solid #444444;}
.scrollable.checkboxes .checkbox.hover, .scrollable.checkboxes .checkbox.checked.hover {background-color:#272727;}
 
.scrollable.checkboxes .checkbox.checked {background-color:#222222;color:#ff7700}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
After Effects styled link buttons
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
.buttons {overflow: hidden;width: 100%;}
.buttons a {background:transparent url('../img/custom-button.png') no-repeat top left; display:block; float:left; font:normal 11px Tahoma; line-height:15px; height:23px; padding-left:4px; text-decoration:none; outline:none; cursor:pointer!important}
.buttons a > span {background: transparent url('../img/custom-button.png') no-repeat right -23px;display: block;padding: 4px 10px 4px 6px;}
.buttons a > span img {background: transparent url('../img/custom-button.png') no-repeat 0 -26px;}
.buttons a:link, .buttons a:visited, .buttons a:hover, .buttons a.active{color: white;text-decoration: none}
.buttons a:hover {background-position: left -46px;}
.buttons a:hover > span{background-position: right -69px;}
.buttons a:hover > span img {background: transparent url('../img/custom-button.png') no-repeat 0 -73px;}
.buttons a.disabled {opacity:0.6;cursor:default}
.buttons a.disabled > span {opacity:0.6;cursor:default}
.buttons a.disabled:hover {background-position: left top;}
.buttons a.disabled:hover > span{background-position: right -23px;}
.buttons a.active {background-position: left -92px;cursor:default!important; color: #006600; font-weight: bold}
.buttons a.active > span {background-position: right -115px;cursor:default!important;}
.buttons a > span > input[type=checkbox] {position:relative;top:-2px;left:-4px;}
.buttons a > span > span {position:relative;top:-4px;left:-2px;}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
After Effects styled select box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
.custom-select {overflow: hidden;width: 100%;}
.custom-select a {cursor:default;background:transparent url('../img/custom-select.png') no-repeat top left; display:block; float:left; font:normal 11px Tahoma; line-height:15px; height:23px; padding-left:4px; text-decoration:none; outline:none;}
.custom-select a span {background: transparent url('../img/custom-select.png') no-repeat right -23px;display: block;padding: 4px 30px 4px 6px;}
.custom-select a:link, .secustom-selectlect a:visited, .custom-select a:hover, .custom-select a:active{color: white;text-decoration: none}
.custom-select a:hover{background-position: left -46px;}
.custom-select a:hover span{background-position: right -69px;}
.custom-select a:active, .custom-select.active a {background-position: left -92px;}
.custom-select a:active span, .custom-select.active a span {background-position: right -115px;}

.custom-select ul {display:none;list-style-type: none; border:1px solid #454545; background-color:#333333; padding:1px;margin:0px;text-align:left;}
.custom-select li {padding:2px 8px 2px 8px;margin:0;color:white;background-color:#444444;background-repeat:no-repeat;background-position:2px 4px;}
.custom-select.with-icons li[value=copy] {padding-left:20px; background-image:url(../img/icon-copy.png);}
.custom-select.with-icons li[value=move] {padding-left:20px; background-image:url(../img/icon-move.png);}
.custom-select.with-icons li[value=delete]{padding-left:20px; background-image:url(../img/icon-delete.png);} 
.custom-select li:hover {background-color:#bebebe;color:black;} 
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
MISC
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
#date, #clock {color:#999999;margin-bottom:20px;font-size:10px;cursor:default}
.js-warning {background-color:#333333;border-bottom:1px solid #454545;color:yellow;padding:5px;text-align:center}